<script lang="ts" setup>
import { ref } from 'vue';

const flag = ref(true)
</script>

<template>
    <!-- 1,将需要切换显示隐藏的盒子,用Transition标签包裹(vue内置) 
         2,一旦包裹，在切换显示隐藏的阶段过程中，会有了六个类，会在不同的时间节点，加给盒子
         进入三个类
            v-enter-from  进入前  还没进入的状态
            v-enter-active   进入中   过程中的状态
            v-enter-to    进入后   完全显示的状态
         离开三个类
            v-leave-from
            v-leave-active
            v-leave-to
        3，通过类名定制动画效果
        4, Transition 可以添加 name  自定义类名前缀 v- => xx-
    -->
    <button @click="flag = !flag">切换</button>
    <Transition name="test">
        <div v-if="flag" class="box">我是一个盒子</div>
    </Transition>
    <!-- <Transition name="bounce">
        <div v-if="flag" class="box">我是一个盒子</div>
    </Transition> -->
</template>

<style scoed lang="less">
.box {
    width: 500px;
    height: 500px;
    background-color: pink;
}

// transition 只能实现两个状态的动画，如果有多个状态的动画要显示 animation
@keyframes bounce {
    0% {
        transform: scale(0);
    }

    25% {
        transform: scale(2);
    }

    50% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

.bounce-enter-active {
    animation: bounce 4s;
}

.bounce-leave-active {
    animation: bounce 4s reverse;
}

// 只淡入，不放大的动画

// 淡入的动画
.test-enter-from {
    opacity: 0;
}

.test-enter-active {
    transition: all 1s;
}

.test-enter-to {
    opacity: 1;
}

// 位移淡出离开的动画
.test-leave-from {
    transform: translateX(0);
    opacity: 1;
}

.test-leave-active {
    transition: all 1s;
}

.test-leave-to {
    opacity: 0;
    transform: translateX(500px);
}
</style>